<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
    <style>
      .box {
        width: 100%;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <button class="btn">按钮2</button>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      /*
        事件处理：
          事件名称：小驼峰命名
          事件回调函数
      */
      // const element = (
      //   <div
      //     className="box"
      //     onMouseMove={() => {
      //       console.log("move了");
      //     }}
      //   >
      //     <button
      //       onClick={() => {
      //         console.log("点击了");
      //       }}
      //     >
      //       按钮
      //     </button>
      //   </div>
      // );

      const handleClick = (event) => {
        // 事件回调函数也提供了event对象，和原生的event对象有些差别
        console.log("点击了", event, this); // this是undefined
      };

      const element = (
        <div className="box">
          <button onClick={handleClick}>按钮1</button>
        </div>
      );

      ReactDOM.createRoot(document.getElementById("root")).render(element);

      // 原生DOM
      document.querySelector(".btn").onclick = function (event) {
        console.log("原生DOM", event, this);
      };
    </script>
  </body>
</html>
